<template>
	<view class="user-login">
		<view class="user-login__not"
			v-if="!userInfo">
			<text>您还未登录，请</text>
			<button size="mini"
				@click="handleLogin"
				type="primary">登录</Button>
		</view>
		<view v-else
			class="user-login__info">
			<view class="user-login__info-base">
				<image class="user-login__info-base-image"
					:src="userInfo.avatar_url"
					mode="scaleToFill"></image>
				<view class="user-login__info-base-nickname">
					{{userInfo.nickname}}
				</view>
			</view>

			<view class="user-login__order">
				<view class="user-login__order-title">
					<view class="user-login__order-title-left">
						<text>我的订单</text>
					</view>
					<view @click="handleGotoAllOrders"
						class="user-login__order-title-left">
						<text>全部</text>
					</view>
				</view>

				<view class="user-login__order-lists">
					<view class="user-login__order-lists-item"
						v-for="item in orderLists"
						:key="item.id">
						<text :class="[item.icon,'iconfont']"></text>
						<view class="title">
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
				<view class="user-login__order-lists-s1">
					<text class="iconfont icon-yulan"></text>
					<text class="title">服务对象管理</text>
				</view>
				<view class="user-login__order-lists-s1">
					<text class="iconfont icon-chuhang"></text>
					<text class="title">分享转发</text>
				</view>
				<view class="user-login__order-lists-s1">
					<text class="iconfont icon-xinxi"></text>
					<text class="title">我是陪护员</text>
				</view>
				<view @click="handleLogout"
					class="user-login__order-lists-s1">
					<text class="iconfont icon-tuichu"></text>
					<text class="title">退出</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'
	const userInfo = ref({
		avatar_url: '',
		nickname: ''
	})

	const orderLists = reactive([{
		id: 1,
		name: '待支付',
		icon: 'icon-repair-baojia'
	}, {
		id: 2,
		name: '待服务',
		icon: 'icon-qx-haocaitongji'
	}, {
		id: 3,
		name: '已完成',
		icon: 'icon-repair-work-order'
	}, {
		id: 4,
		name: '已取消',
		icon: 'icon-repair-quji'
	}])
	const isLogin = computed(() => {
		return userInfo.value
	})

	onShow(() => {
		const data = uni.getStorageSync('userInfo') && JSON.parse(uni.getStorageSync('userInfo'))
		userInfo.value = data
	})
	const
		gUtils = getApp().globalData.utils

	const handleLogin = async () => {
		//获取用户信息
		const ret = await gUtils.getUserInfo()
		console.log('ret', ret);
		userInfo.value = ret
	}
	const handleGotoAllOrders = () => {
		uni.switchTab({
			url: "/pages/order/order"
		})
	}

	const handleLogout = () => {
		uni.clearStorageSync('userInfo')
		uni.clearStorageSync('cfg')
		uni.clearStorageSync('loading')
		userInfo.value = null
	}
</script>

<style lang="scss"
	scoped>
	.user-login {
		&__not {
			height: 600rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			gap: 20rpx;
			color: grey;
			font-size: 28rpx;
		}

		&__info {
			&-base {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 60rpx auto;

				&-image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
					border: 1rpx solid #ccc;
				}

				&-nickname {
					color: #999;
					font-size: 26rpx;
					margin: 20rpx 0;
				}
			}
		}

		&__order {
			margin: 0 40rpx;

			&-title {
				display: flex;
				justify-content: space-between;
				color: #999;
				font-size: 24rpx;
			}

			&-lists {
				display: flex;
				margin: 60rpx 0;

				&-item {
					flex: 1;
					text-align: center;
					color: grey;

					.iconfont {
						font-size: 60rpx;
						color: grey;
					}

					.title {
						font-size: 24rpx;
						color: #d2d2d2;
						margin-top: 10rpx;
					}
				}

				&-s1 {
					margin: 80rpx 0;
					display: flex;
					gap: 20rpx;
					align-items: center;

					.title {
						font-size: 26rpx;
						color: #333;
					}
				}
			}
		}
	}
</style>